<template>
  <div class="performance-page">
    <div class="page-box">
      <div class="title">
        <span>项目管理/项目详情</span>
        <span class="back-btn" @click="() => this.$router.back()"
          ><img src="../../assets/images/icon_comm_back.png" alt="" />返回</span
        >
      </div>
      <div class="query-box">
        <el-form
          ref="queryForm"
          inline
          label-position="left"
          label-width="80px"
          :model="queryForm"
          :rules="queryFormRules"
          size="small"
        >
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="选择时间">
                <el-date-picker
                  v-model="queryForm.selectTime"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="{disabledDate}"
                  align="left"
                 >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="8">
              <el-form-item label="时间周期">
                <el-select v-model="queryForm.timeCycle" placeholder="请选择时间周期" @change="currentSelect" clearable>
                  <el-option label="自定义" value="0" />
                  <el-option label="近三十天" value="1" />
                  <el-option label="近九十天" value="2" />
                  <el-option label="近半年" value="3" />
                  <el-option label="近一年" value="4" />
                </el-select>
              </el-form-item>
            </el-col> -->
          </el-row>
        </el-form>
      </div>
      <div class="content-box">
        <!-- 申请云资源使用情况 -->
        <div>
          <div class="content-title">
            <img src="../../assets/images/icon_16_title.png" alt="" />
            申请云资源使用情况
          </div>
          <div class="content-text">
            <div class="text-box">
              <div>CPU使用率均值</div>
              <div>12.04%</div>
            </div>
            <div class="text-box">
              <div>CPU使用率均值</div>
              <div>12.04%</div>
            </div>
            <div class="text-box">
              <div>CPU使用率均值</div>
              <div>12.04%</div>
            </div>
            <div class="text-box">
              <div>CPU使用率均值</div>
              <div>12.04%</div>
            </div>
            <div class="text-box">
              <div>CPU使用率均值</div>
              <div>12.04%</div>
            </div>
            <div class="text-box">
              <div>CPU使用率均值</div>
              <div>12.04%</div>
            </div>
          </div>
        </div>
        <!-- 系统运行情况分析 -->
        <div>
          <div class="content-title">
            <img
              src="../../assets/images/icon_16_title.png"
              alt=""
            />系统运行情况分析
          </div>
          <div class="content-text">
            <div class="text-box">
              <div>CPU使用率均值</div>
              <div>12.04%</div>
            </div>
            <div class="text-box">
              <div>CPU使用率均值</div>
              <div>12.04%</div>
            </div>
            <div class="text-box">
              <div>CPU使用率均值</div>
              <div>12.04%</div>
            </div>
            <div class="text-box">
              <div>CPU使用率均值</div>
              <div>12.04%</div>
            </div>
            <div class="text-box">
              <div>CPU使用率均值</div>
              <div>12.04%</div>
            </div>
            <div class="text-box">
              <div>CPU使用率均值</div>
              <div>12.04%</div>
            </div>
          </div>
        </div>
        <!-- 系统综合情况分析 -->
        <div>
          <div class="content-title">
            <img src="../../assets/images/icon_16_title.png" alt="" />
            系统综合情况分析
          </div>
          <div class="content-text">
            <div class="text-box">
              <div>CPU使用率均值</div>
              <div>12.04%</div>
            </div>
            <div class="text-box">
              <div>CPU使用率均值</div>
              <div>12.04%</div>
            </div>
            <div class="text-box">
              <div>CPU使用率均值</div>
              <div>12.04%</div>
            </div>
            <div class="text-box">
              <div>CPU使用率均值</div>
              <div>12.04%</div>
            </div>
            <div class="text-box">
              <div>CPU使用率均值</div>
              <div>12.04%</div>
            </div>
            <div class="text-box">
              <div>CPU使用率均值</div>
              <div>12.04%</div>
            </div>
          </div>
        </div>
        <!-- echarts表 -->
        <div>
          <div class="content-title content-title1">
            <span
              ><img src="../../assets/images/icon_16_title.png" alt="" />
              系统运行分析</span
            >
            <span>
              <el-select v-model="time" placeholder="月">
                <el-option label="日" value="日" />
                <el-option label="周" value="周" />
                <el-option label="月" value="月" />
              </el-select>
            </span>
          </div>
          <div class="charts-box">
            <div class="top-charts">
              <div>
                <echarts-line />
              </div>
              <div>
                <echarts-line />
              </div>
            </div>
            <div class="top-charts">
              <div>
                <echarts-line />
              </div>
              <div>
                <echarts-bar />
              </div>
            </div>
          </div>
        </div>
        <!-- 绩效评分 -->
        <div>
          <div class="content-title">
            <img src="../../assets/images/icon_16_title.png" alt="" /> 绩效评分
          </div>
          <div class="text-box1">
            <span>运行考核时间</span>
            <span>2022/01/04 - 2022/07/04</span>
          </div>
        </div>
        <!-- 最终综合得分 -->
        <div>
          <div class="content-title">
            <img src="../../assets/images/icon_16_title.png" alt="" /> 最终综合评分
          </div>
          <div class="text-box1">
            <span>最终综合评分</span>
            <!-- <span style="color:#3171EE">4.8分</span> -->
          </div>
        </div>
        <!-- 评分指标说明 -->
        <div>
          <div class="content-title">
            <img src="../../assets/images/icon_16_title.png" alt="" /> 评分指标说明
          </div>
          <div>
            <vxe-table
              ref="table"
              border
              cell-class-name="table-cell"
              class="list-table"
              :data="tableData"
              header-cell-class-name="table-header-cell"
              header-row-class-name="table-header"
              :loading="loading"
              show-header-overflow="ellipsis"
              show-overflow="tooltip"
            >
              <vxe-table-column
                v-for="item in tableColumn"
                :key="item.field"
                v-bind="item"
              />
            </vxe-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echartsLine from "./components/echartsLine";
import echartsBar from "./components/echartsBar";

import { getTime } from "@/api/manage/manage.js";

export default {
  components: {
    echartsLine,
    echartsBar,
  },
  created() {
    this.getDefaultTime();
  },

  data() {
    return {
      // 查询参数
      queryForm: {
        selectTime: [],
        timeCycle:'0'
      },
      time: [],
      tableColumn: [
        { type: "seq", width: "60", title: "序号" },
        { field: "name", title: "指标名称" },
        { field: "createTime", title: "指标描述" },
        { field: "company", title: "指标权重" },
      ],
      tableData: [],
      queryFormRules: {},
      loading: false,
      // 时间参数  用于比较选择的时间
      flagTime:{}
    };
  },
  methods: {
    /** 获取默认回显时间 */
    getDefaultTime(){
      const id = this.$route.query.id;
      if (id) {
        getTime(id).then((res) => {
        // this.formatTime(res.lastAdoptTime);
        this.flagTime = res
        this.$set(this.queryForm.selectTime, 0, res.lastAdoptTime);
        // 考核时间与当前时间对比
        let nowTime = new Date() //当前时间
        let endTime = res.endTime;
        let end = new Date(endTime.replace(/-/g,"/")) //对比时间
        if(nowTime.getTime() < end.getTime()){
          //当前时间比指定时间小
          this.$set(this.queryForm.selectTime, 1, this.getFormatTime(nowTime));
        }else{
          //大于指定时间
          this.$set(this.queryForm.selectTime, 1, res.endTime);  
        }
        });
      }
    },
    /** 获取当前时间 */
    getFormatTime(time) {
      var year = time.getFullYear();
      var month = time.getMonth() + 1;
      var day = time.getDate();
      var hour = time.getHours();
      var minute = time.getMinutes();
      var second = time.getSeconds();

      const aa =
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second;

      return aa;
    },
    /** 初始化时间 */
    formatTime(time) {
      let showTime = "";
      const newTime = new Date();
      const arr = time.split("-");
      arr[0] = parseInt(arr[0]) + 1;
      const newTime1 = arr.toString().replace(/,/g, "-");
      const auditTime = new Date(newTime1);
      if (newTime < auditTime) {
        showTime = newTime;
      } else {
        showTime = auditTime;
      }
      // console.log(this.getFormatTime(showTime), "1111111111");
      console.log(time, "qqqqqq");
      this.$set(this.queryForm.selectTime, 0, time);
      this.$set(this.queryForm.selectTime, 1, this.getFormatTime(showTime));
    },
    /** 选择时间周期下拉选框 */
    currentSelect(val){
      console.log(999,val);
      let nowTime = new Date() //当前时间
      let startLastAdoptTime = this.flagTime.lastAdoptTime
      let contrastTime = new Date(startLastAdoptTime.replace(/-/g,"/")) //对比时间
      if(val==='0'){
        this.$set(this.queryForm.selectTime, 0, this.flagTime.lastAdoptTime);
        this.$set(this.queryForm.selectTime, 1, this.getFormatTime(nowTime));
      }else if(val==='1'){
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        if(start.getTime() < contrastTime.getTime()){
          this.$set(this.queryForm.selectTime, 0, this.flagTime.lastAdoptTime);
          this.$set(this.queryForm.selectTime, 1, this.getFormatTime(nowTime));
        }else{
          this.$set(this.queryForm.selectTime, 0, this.getFormatTime(start));
          this.$set(this.queryForm.selectTime, 1, this.getFormatTime(nowTime));
        }
      }else if(val==='2'){
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
        if(start.getTime() < contrastTime.getTime()){
          this.$set(this.queryForm.selectTime, 0, this.flagTime.lastAdoptTime);
          this.$set(this.queryForm.selectTime, 1, this.getFormatTime(nowTime));
        }else{
          this.$set(this.queryForm.selectTime, 0, this.getFormatTime(start));
          this.$set(this.queryForm.selectTime, 1, this.getFormatTime(nowTime));
        }
      }else if(val==='3'){
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
        if(start.getTime() < contrastTime.getTime()){
          this.$set(this.queryForm.selectTime, 0, this.flagTime.lastAdoptTime);
          this.$set(this.queryForm.selectTime, 1, this.getFormatTime(nowTime));
        }else{
          this.$set(this.queryForm.selectTime, 0, this.getFormatTime(start));
          this.$set(this.queryForm.selectTime, 1, this.getFormatTime(nowTime));
        }
      }else if(val==='4'){
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 360);
        if(start.getTime() < contrastTime.getTime()){
          this.$set(this.queryForm.selectTime, 0, this.flagTime.lastAdoptTime);
          this.$set(this.queryForm.selectTime, 1, this.getFormatTime(nowTime));
        }else{
          this.$set(this.queryForm.selectTime, 0, this.getFormatTime(start));
          this.$set(this.queryForm.selectTime, 1, this.getFormatTime(nowTime));
        }
      }
    },
    disabledDate(time) {
      let startLastAdoptTime = this.flagTime.lastAdoptTime
      let contrastTime = new Date(startLastAdoptTime.replace(/-/g,"/")) //对比时间
      return time.getTime() > Date.now() || time.getTime() < contrastTime.getTime();
      //若选择的日期小于当前日期(不包含今天)： time.getTime() > Date.now() - 8.64e7
    }
  },
};
</script>

<style lang="scss" scoped>
.performance-page {
  padding: 16px;
  background: #f5f5f5;
  .page-box {
    padding: 24px;
    background: #fff;
    border-radius: 10px;
    width: 1680px;
    .title {
      width: 1680px;
      font-size: 18px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      color: #000000;
      line-height: 18px;
      text-align: left;
      display: flex;
      justify-content: space-between;
      margin-bottom: 24px;
      .back-btn {
        margin-right: 56px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #333333;
        display: flex;
        align-items: center;
        img {
          margin-right: 7px;
        }
      }
    }
    .content-box {
      .content-title {
        width: 1600px;
        height: 50px;
        line-height: 50px;
        display: flex;
        align-items: center;
        border: 1px solid #ebecef;
        border-right: 0;
        border-left: 0;
        margin: 24px 0;
        img {
          margin-right: 6px;
        }
      }
      .content-title1 {
        display: flex;
        justify-content: space-between;
        > span {
          display: inline-block;
        }
      }
      .content-text {
        display: flex;
        & > :not(:first-child) {
          margin-left: 21px;
        }
        .text-box {
          width: 249px;
          height: 98px;
          background: rgba(49, 113, 238, 0.03);
          border: 1px solid #d0e2fb;
          border-radius: 4px;
          padding: 16px 20px;
          font-size: 24px;
          font-family: DIN Alternate, DIN Alternate-Bold;
          font-weight: 700;
          text-align: LEFT;
          color: #3171ee;
          & > :first-child {
            margin-bottom: 16px;
            font-size: 16px;
            font-family: PingFang SC, PingFang SC-Medium;
            font-weight: 500;
            text-align: LEFT;
            color: #666666;
          }
        }
      }
      .text-box1 {
        border: 1px solid #ebecef;
        width: 1600px;
        > span {
          display: inline-block;
        }
        & > :first-child {
          width: 267px;
          height: 48px;
          background: #fafafa;
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          text-align: CENTER;
          color: #666666;
          line-height: 48px;
          border-right: 1px solid #ebecef;
        }
        & > :last-child {
          text-indent: 23px;
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          color: #333333;
        }
      }
      .charts-box {
        & > div {
          display: flex;
          // width:
        }
      }
    }
  }
}
</style>
